<template>
  <el-card header="员工信息">
    <el-table :data="list" stripe :header-cell-style="{background:'#f8faff',color:'#818693'}">
      <el-table-column type="index" label="序号" />
      <el-table-column prop="userId" label="员工编号" />
      <el-table-column prop="name" label="员工姓名" />
      <el-table-column prop="mobile" label="手机号" />
      <el-table-column prop="agency" label="所属机构">
        <template #default="{row}">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="account" label="系统账户" />
      <el-table-column prop="roleNames" label="系统角色">
        <template #default="{row}">
          <span>{{ row.roleNames[0] }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="账户状态">
        <template #default="{row}">
          <div :class="row.status?'green-status':'red-status'">{{ row.status?'正常':'异常' }}</div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      :current-page="page.page"
      :page-sizes="[5, 10, 20, 40]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="counts"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
</template>

<script>
import { getEmployeeInfoApi } from '@/api/ogization'
export default {
  props: {
    nodekey: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      page: {
        page: 1,
        pageSize: 5
      },
      list: [],
      counts: 0
    }
  },
  // created() {
  //   this.getEmployeeInfo()
  // },
  watch: {
    nodekey: {
      immediate: true,
      handler() {
        this.getEmployeeInfo()
      }

    }
  },
  methods: {
    // 获取员工信息
    async getEmployeeInfo() {
      const res = await getEmployeeInfoApi({ ...this.page, agencyId: this.nodekey })
      // console.log(res)
      this.list = res.items
      this.counts = +res.counts
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getEmployeeInfo()
    },
    handleCurrentChange(val) {
      this.page.page = val
      this.getEmployeeInfo()
    }
  }
}
</script>

<style lang="scss" scoped>
.green-status::before{
    content: "";
    width: 6px;
    height: 6px;
    background: #1dc779;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}
.red-status::before{
    content: "";
    width: 6px;
    height: 6px;
    background: red;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}
.el-pagination{
  margin-top: 10px;
  text-align: center;
}
</style>
